<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <div class="nav_left">控制台</div>
      <div class="nav_middle">{{text}}</div>
      <div class="nav_right">
        <el-dropdown :hide-on-click="false">
          <img src="../assets/img/rx.png" />
          <span class="nickName">{{nickName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="cleanCache">清理缓存</el-dropdown-item>
            <el-dropdown-item @click.native="handleRevise">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="cleanCache">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 页面主题区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="300px">
        <div class="main_homepage" @click="handleHomepage">
          <i></i>
          <span>{{text}}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="#000"
              active-text-color="#3040A0"
              unique-opened
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="home"></i>
                  <span>导航分类</span>
                </template>
                <!-- 二级菜单区域 -->
                <el-menu-item index="1-1" @click="handleApplication">应用</el-menu-item>
                <el-menu-item index="1-2" @click="handlePlug">插件</el-menu-item>
                <el-menu-item index="1-3" @click="handleTemp">模板</el-menu-item>
                <el-menu-item index="1-4" @click="handleWall">壁纸</el-menu-item>
                <el-menu-item index="1-5" @click="handleVideo">视频</el-menu-item>
                <el-menu-item index="1-6" @click="handleSource">素材</el-menu-item>
                <el-menu-item index="1-7" @click="handleIcon">图标</el-menu-item>
              </el-submenu>
              <el-menu-item index="2" @click="handleuserManage">
                <i class="nav"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="3" @click="handlevipmember">
                <i class="member"></i>
                <span slot="title">会员等级</span>
              </el-menu-item>
              <el-menu-item index="4" @click="handelarticle">
                <i class="text"></i>
                <span slot="title">文章管理</span>
              </el-menu-item>
              <el-menu-item index="5" @click="handleIntegral">
                <i class="integral"></i>
                <span slot="title">积分管理</span>
              </el-menu-item>
              <el-menu-item index="6" @click="handelfeedback">
                <i class="feedback"></i>
                <span slot="title">用户反馈</span>
              </el-menu-item>
              <el-menu-item index="7" @click="handleAnnounce">
                <i class="mess"></i>
                <span slot="title">发布公告</span>
              </el-menu-item>
              <el-menu-item index="8" @click="handleSet">
                <i class="mess"></i>
                <span slot="title">设置</span>
              </el-menu-item>
              <!-- 运营管理 -->
              <el-submenu index="9">
                <template slot="title">
                  <i class="home"></i>
                  <span>运营管理</span>
                </template>
                <!-- 二级菜单区域 -->
                <el-menu-item index="1-1" @click="handleRotation">轮播图表</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <!-- 主体区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "主页",
      nickName: "",
      portrait: "",
      token: this.$route.query.token
    };
  },
  created() {
    this.$axios
      .post("/userApi/login/token", {
        token: this.token
      })
      .then(res => {
        const resdata = res.data;
        if (resdata.status == "fail") {
          this.$router.push("./login");
        } else {
          const data = resdata.data;
          this.nickName = data.nickName;
          this.portrait = data.portrait;
        }
      });
  },

  methods: {
    cleanCache() {
      this.$axios
        .post("/userApi/login/cleanCache", {
          token: this.token
        })
        .then(res => {
          const resdata = res.data;
          if (resdata.status == "ok") {
            this.$router.push("./login");
          } else {
            this.$message.info("失败");
          }
        });
    },
    // 点击主页
    handleHomepage() {
      this.$router.push({ path: "./present", query: { token: this.token } });
    },
    // 点击应用
    handleApplication() {
      this.$router.push({
        path: "./applica",
        query: { token: this.token }
      });
    },
    // chajian
    handlePlug() {
      this.$router.push({
        path: "./pluggable_unit",
        query: { token: this.token }
      });
    },
    // 模板
    handleTemp() {
      this.$router.push({
        path: "./formwork",
        query: { token: this.token }
      });
    },
    // bizhi
    handleWall() {
      this.$router.push({
        path: "./wallpaper",
        query: { token: this.token }
      });
    },
    // 视频
    handleVideo() {
      this.$router.push({ path: "./video", query: { token: this.token } });
    },
    // 素材
    handleSource() {
      this.$router.push({ path: "./source_materia", query: { token: this.token } });
    },
    // 图标
    handleIcon() {
      this.$router.push({ path: "./icon", query: { token: this.token } });
    },
    // 积分管理
    handleIntegral() {
      this.$router.push({ path: "./integral", query: { token: this.token } });
    },
    handleuserManage() {
      this.$router.push({
        path: "./user_manage",
        query: { token: this.token }
      });
      // this.$router.push({path :'./user_manage'})
    },
    handlevipmember() {
      this.$router.push({ path: "./vip", query: { token: this.token } });
    },
    handelarticle() {
      this.$router.push({ path: "./article", query: { token: this.token } });
    },
    handelfeedback() {
      this.$router.push({ path: "./feedback", query: { token: this.token } });
    },
    handleRevise() {
      this.$router.push({
        path: "./revisePassword",
        query: { token: this.token }
      });
    },
    // 发布公告
    handleAnnounce() {
      this.$router.push({ path: "./announce", query: { token: this.token } });
    },
    // 设置
    handleSet() {
      this.$router.push({ path: "./set", query: { token: this.token } });
    },
    // 点击轮播图
    handleRotation() {
      this.$router.push({ path: "./Rotation_chart", query: { token: this.token } });
    }
  }
};
</script>

<style>
.el-header {
  display: flex;
  padding: 0;
  line-height: 60px;
  color: #fff;
}
.nav_left {
  width: 300px;
  height: 60px;
  background: #3040a0;
  padding-left: 64px;
  box-sizing: border-box;
}
.nav_middle {
  flex: 1;
  background: #3f51b5;
  padding-left: 38px;
}
.nav_right {
  width: 144px;
  height: 60px;
  background: #3040a0;
}
.el-col {
  font-size: 20px;
  width: 100%;
}
.el-menu-item,
.el-submenu__title,
.main_homepage {
  font-size: 20px;
}
.main_homepage {
  height: 69px;
  line-height: 69px;
  padding-left: 20px;
  border-bottom: 1px solid #bdbdbd;
}
.el-menu-item i,
.el-submenu__title i {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}
.main_homepage i {
  background: url("../assets/img/home.png") no-repeat;
  background-size: 24px;
}
.home {
  background: url("../assets/img/nav.png") no-repeat;
  background-size: 24px;
}
.nav {
  background: url("../assets/img/uesr_manage.png") no-repeat;
  background-size: 24px;
}
.member {
  background: url("../assets/img/hy.png") no-repeat;
  background-size: 24px;
}
.text {
  background: url("../assets/img/text.png") no-repeat;
  background-size: 24px;
}
.integral {
  background: url("../assets/img/integral.png") no-repeat;
  background-size: 24px;
}
.feedback {
  background: url("../assets/img/feedback.png") no-repeat;
  background-size: 24px;
}
.mess {
  background: url("../assets/img/mess.png") no-repeat;
  background-size: 24px;
}
.el-menu {
  border: 0;
}

.nav_right img {
  width: 48px;
  height: 48px;
  vertical-align: middle;
  margin-left: 16px;
}
.nav_right span {
  color: #fff;
  font-size: 16px;
}
.el-main {
  padding: 56px 40px 44px;
}
.present,
.data_analysis {
  height: 26px;
  border-left: 4px solid #3f51b5;
  padding-left: 10px;
  color: #212121;
}
.data_analysis {
  margin-top: 44px;
}
.pre_card {
  display: flex;
  margin-top: 16px;
}
h1,
h2 {
  font-style: normal;
  margin-left: 30px;
  font-weight: 400;
}
h2 {
  font-size: 14px;
  margin-top: 35px;
}
h1 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0;
}
.pre_card i {
  margin-left: 60px;
  flex: 1;
}
.pre_card i:nth-child(1) {
  display: inline-block;
  width: 250px;
  height: 130px;
  background: url("../assets/upload/zi.png") no-repeat;
  background-size: 250px 130px;
}
.pre_card i:nth-child(2) {
  display: inline-block;
  width: 250px;
  height: 130px;
  background: url("../assets/upload/yell.png") no-repeat;
  background-size: 250px 130px;
}
.pre_card i:nth-child(3) {
  display: inline-block;
  width: 250px;
  height: 130px;
  background: url("../assets/upload/green.png") no-repeat;
  background-size: 250px 130px;
}
.data_download {
  width: 458px;
  margin-top: 22px;
}
.data_download h1 {
  color: #212121;
}
.el-aside {
  border-right: 1px solid #eee;
}
.el-upload-list li {
  width: 60px;
  height: 60px !important;
}
.el-submenu__title {
  font-size: 20px !important;
}

/* 激活的背景颜色 */
.el-menu-item.is-active {
  background: #e9f4fd !important;
}
</style>
